<template>
    <div class="view_parameter">
        <card title="参数管理">
            <template #actions>
                <el-select class="w-28" v-model="queryBy">
                    <el-option v-for="(val, key) in queryBySomething" :label="val" :value="key" :key="key" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
                <el-button type="primary" @click="add">添加参数</el-button>
            </template>
            <template #default>
                <el-table :data="tableData" row-key="dictionaryId" :tree-props="{ children: 'childs' }">
                    <el-table-column label="keyCode" prop="keyCode"></el-table-column>
                    <el-table-column label="content" prop="content"></el-table-column>
                    <el-table-column label="description" prop="description"></el-table-column>
                    <el-table-column label="actions">
                        <template v-slot="{ row }">
                            <el-button type="text" @click="edit(row)">编辑</el-button>
                            <el-button type="text" @click="_delete(row.dictionaryId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 添加/修改参数对话框 -->
        <el-dialog :visible.sync="visible" :title="dialogTitle" @opened="handleOpened" @closed="handleClosed">
            <template v-slot:default>
                <el-form label-position="top">
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item label="参数名">
                                <el-input v-model="formData.keyCode" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="父级主键">
                                <tree-select v-model="formData.parent" :options="parentOptions" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="描述">
                        <el-input v-model="formData.description" type="textarea" resize="none" :rows="3" />
                    </el-form-item>
                    <el-form-item label="内容">
                        <editor v-model="formData.content" :isPlainText="!formData.richText" ref="editor" />
                    </el-form-item>
                    <el-form-item label="备选项">
                        <el-checkbox v-model="formData.richText">富文本</el-checkbox>
                    </el-form-item>
                </el-form>
            </template>
            <template v-slot:footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getDeletionOptions, getQueryOptions } from '../../mixins';
import editor from '../components/editor';
import treeSelect from '@riophae/vue-treeselect';

const APIURL = {
    get: '/yxl/platform/findDictionary',
    set: '/yxl/platform/updateDictionary',
    save: '/yxl/platform/saveDictionary',
    delete: '/yxl/platform/deleteDictionary',
};

// 初始表单数据
const defaultFormData = {
    keyCode: '',
    content: '',
    description: '',
    parent: 0,
    richText: false,
};

// 表单数据副本（用于重置表单数据）
const defaultFormDataCopied = Object.assign({}, defaultFormData);

export default {
    data() {
        return {
            tableData: [],
            visible: false,
            formData: defaultFormData,
            queryBy: 'keyCode',

            editing: false,
        };
    },

    components: { editor, treeSelect },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/platform/findDictionary',
            paginable: true,
            params: {
                queryString: 'queryBy',
            },
        }),

        // getModificationOptions({
        //     formDataProperty: 'form',
        //     primaryKey: 'dictionaryId',
        // }),

        // getAdditionOptions({
        //     additionApiurl: APIURL.save,
        //     modificationApiurl: APIURL.set,
        //     formDataProperty: 'form',
        //     fnBeforeSaving(data) {
        //         data.richText = data.isRichText;
        //         delete data.isRichText;
        //         return true;
        //     },
        // }),

        getDeletionOptions({
            apiurl: '/yxl/platform/deleteDictionary',
            params: 'dictionaryId',
            // primaryKey: 'dictionaryId',

            // formDataKeyMapping: {
            //     richText: 'isRichText',
            // },
        }),
    ],

    computed: {
        // 对话框标题
        dialogTitle() {
            return this.editing ? '编辑参数' : '添加参数';
        },

        // 按某物查询
        queryBySomething() {
            return {
                keyCode: '参数名',
                description: '描述',
            };
        },

        // 占位符
        placeholder() {
            return `按${this.queryBySomething[this.queryBy]}查询`;
        },

        parentOptions() {
            return [{ id: 0, label: '根目录' }].concat(
                this.tableData.map(item => ({ id: item.dictionaryId, label: item.keyCode }))
            );
        },
    },

    methods: {
        // 添加
        add() {
            this.editing = false;
            this.visible = true;
        },

        // 编辑
        edit(row) {
            this.editing = true;
            this.formData.dictionaryId = row.dictionaryId;
            this.formData.parent = row.parent;
            this.formData.keyCode = row.keyCode;
            this.formData.description = row.description;
            this.formData.content = row.content;
            this.formData.richText = row.richText;

            this.visible = true;
        },

        // 保存
        save() {
            this.$put(`/yxl/platform/${this.editing ? 'update' : 'save'}Dictionary`, this.formData).then(res => {
                this.visible = false;
                this.query();
            });
        },

        // 处理对话框关闭
        handleClosed() {
            this.$refs.editor.clear();
            delete this.formData.dictionaryId;
            Object.assign(this.formData, defaultFormDataCopied);
        },

        // 处理对话框打开
        handleOpened() {
            this.$refs.editor.setValue(this.formData.content);
        },
    },
};
</script>